<template>
	<Teleport to="#dialog">
		<el-dialog v-model="showDialog" width="720px">
			<div>
				<div class="header">
					<ElImage :src="goods.coverImage" fit="cover" />
					<div class="g-info">
						<span class="g-i-name"> {{ goods.name }} </span>
						<div>
							<div>
								<span>{{ goods.integral }}</span>
								积分
							</div>
							<el-input-number v-model="placeAnOrderForm.num" :min="1" />
						</div>
					</div>
				</div>

				<el-divider />

				<el-form ref="PlaceFormRef" class="form" :model="placeAnOrderForm" label-width="120px" :rules="rules" status-icon>
					<el-form-item label="收货人" prop="shippingName">
						<el-input v-model="placeAnOrderForm.shippingName" :placeholder="'请填写收货人'" />
					</el-form-item>
					<el-form-item label="收货人电话" prop="shippingTel">
						<el-input v-model="placeAnOrderForm.shippingTel" :placeholder="'请填写收货人电话'" />
					</el-form-item>
					<el-form-item label="收货地址" prop="shippingAddress">
						<el-input v-model="placeAnOrderForm.shippingAddress" :placeholder="'请填写收货地址'" />
					</el-form-item>
				</el-form>
			</div>

			<template #footer>
				<div class="footer">
					<div>
						消费积分： <span>{{ goods.integral * placeAnOrderForm.num }}</span>
					</div>

					<div>
						<ElButton @click="close"> 取消 </ElButton>
						<ElButton type="primary" @click="validateForm"> 兑换 </ElButton>
					</div>
				</div>
			</template>
		</el-dialog>
	</Teleport>
</template>
<script setup lang="ts" name="PlaceAnOrderDialog">
import { TFormItemRules } from "@/components/interface";
import { IPointsGoods } from "@/service/interface/points";
import { pointsExchangeGoods } from "@/service/modules/points";
import { useUserStore } from "@/store/user";
import { FormInstance } from "element-plus";

export interface IPlaceAnOrderForm {
	goodsId: number;
	num: number;
	shippingName: string;
	shippingTel: string;
	shippingAddress: string;
}

const props = defineProps<{ goods: IPointsGoods }>();

//表单项规则
const rules = reactive<TFormItemRules<IPlaceAnOrderForm>>({
	shippingName: [{ required: true, message: "请填写收货人" }],
	shippingTel: [{ required: true, message: "请填写收货人电话" }],
	shippingAddress: [{ required: true, message: "请填写收货地址" }]
});

// 下单表单
const placeAnOrderForm = ref<IPlaceAnOrderForm>({
	goodsId: -1,
	num: 0,
	shippingName: "",
	shippingTel: "",
	shippingAddress: ""
});

const PlaceFormRef = ref<FormInstance>();

/**
 *验证表单
 */
const validateForm = async () => {
	await PlaceFormRef.value.validate((valid, fields) => {
		if (valid) {
			placeAnOrder();
		} else {
			console.log("error submit!", fields);
		}
	});
};

/**
 * 下单
 */
const placeAnOrder = async () => {
	placeAnOrderForm.value.goodsId = props.goods.id;
	const { message } = await pointsExchangeGoods(placeAnOrderForm.value);
	ElNotification.success({ title: "提示", message });
	const { actionGetUserInfo } = useUserStore();
	actionGetUserInfo();
	close();
};

// 是否显示对话框
const showDialog = ref(false);

/**
 * 打开对话框
 */
const open = () => {
	showDialog.value = true;
};
/**
 * 关闭对话框
 */
const close = () => {
	showDialog.value = false;
};

defineExpose({ open, close });
</script>
<style lang="scss" scoped>
.header {
	display: flex;
	.el-image {
		width: 120px;
		height: 120px;
	}
	.g-info {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 20px;

		--el-color-primary: #8a1313;
		.g-i-name {
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}
		> div {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 12px;
			color: var(--el-color-primary);
			span {
				font-size: 20px;
			}
		}
	}
}
.form {
	padding: 20px 60px;
}
.footer {
	display: flex;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid #dedede;

	--el-color-primary: #8a1313;
	span {
		color: var(--el-color-primary);
	}
}
</style>
